<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Progress</title>
        <style>
            .progress {
                width: 300px;
                height: 20px;
                background-color: darkblue;
                border-radius: 20px;
                margin: 25px solid black;
            }

            .inner {
                /* width: 150px; */
                height: 80%;
                background-color: lightblue;
                border-radius: 10px;
                transition: width 0.5s;
            }
        </style>
    </head>

    <body>
        <script src="../src/Vue2/vue.js"></script>

        <div class="app">
            <div class="progress">
                <div class="inner" :style="{ width: width }">
                    <!-- <span>{{ width }}</span> -->
                </div>
            </div>

            <br>

            <button @click="width = '25%'">
                set to 25%
            </button>

            <button @click="width = '50%'">
                set to 50%
            </button>

            <button @click="width = '75%'">
                set to 75%
            </button>

            <button @click="width = '100%'">
                set to 100%
            </button>
        </div>

        <script>
            const inner = new Vue({
                el: '.app',
                data: {
                    width: '10%'
                }
            })
        </script>
    </body>
</html>